<template>
	<view>
		<!-- 自定义导航栏 -->

		<u-navbar leftText="返回"  :safeAreaInsetTop="false" :bgColor="bgColor" leftIconColor="#FFFFFF"
			:titleStyle="{ color: '#FFFFFF' }">
			<view class="u-nav-slot" slot="left">
				<!--    <u-icon
		                    name="arrow-left"
		                    size="19"
		                ></u-icon> -->
			</view>
		</u-navbar>

		<!-- 头像信息 优惠券 -->
		<div class="titlegrzx">
			个人中心
		</div>

		<div class="top-top">
			<div class="top">
				
				<div class="txxxandyhq">
					
					<div class="txxx">
						<div class="txxx-tx">
							<center>
								<view @click="tzgrxx" class="txxx-tx-tx">
									<u-avatar size="65" :src="src"></u-avatar>
								</view>
							</center>
						</div>
						<div class="txxx-xx">
							<div class="txxx-xx-xm">张先生</div>
							<div class="txxx-xx-sjh">18236197368</div>
						</div>
					</div>


					<div class="wdyhq">
						<uni-card class="wdyhq-card" thumbnail="" note="Tips">
							<div class="wdyhq-card-content" @click="towdyhq">

								<div class="wdyhq-card-content-c">
									<div class="w-c-c-c-a">
										<image src="/static/wdimg/yhqq.png" class="wdyhq-card-content-left-img"
											mode="widthFix"></image>
									</div>
									<div class="w-c-c-c-t">我的优惠券</div>
								</div>
								<div class="wdyhq-card-content-c">
									<div class="w-c-c-c-b">3张</div>
									<div class="w-c-c-c-a">
										<image src="/static/wdimg/sqjt.png" class="wdyhq-card-content-right-img"
											mode="widthFix"></image>
									</div>
								</div>

							</div>
						</uni-card>
					</div>

				</div>
			</div>
		</div>


		<div class="wddd">
			<uni-card title=""  >
				<template v-slot:title>
					<div class="card-title">
					<div class="card-title-text">我的订单</div>
					<div class="card-title-ew" @click="tzwddd">
						<div class="card-title-ew-l">
						全部订单
						</div>
						<div class="card-title-ew-r">
						<image class="card-title-img" src="/static/wdimg/sqjt.png" mode="widthFix"></image>
					</div>
					</div>
					</div>
				</template>
				
				<div class="wddd-content">
					<div class="wddd-content-div" style="background-image: url(/static/wdimg/bgl.png);	background-size: 100%;" @click="tzdddzf">待支付</div>
					<div class="wddd-content-div" style="background-image: url(/static/wdimg/bgc.png);	background-size: 100%;" @click="tzdddsy">待使用</div>
					<div class="wddd-content-div" style="background-image: url(/static/wdimg/bgql.png);	background-size: 100%;" @click="tzdddpj">待评价</div>
				</div>
				
			</uni-card>
		</div>
		
		
		
		
		<div class="wdfw">
			<uni-card title=""  >
				<template v-slot:title>
					<div class="card-title">
					<div class="card-title-text">我的服务</div>
					</div>
				</template>
				
				<div>
					<div class="m-wdfw-fw">
					
					
						<div class="m-wdfw-f-mokuai" @click="tzlqzx">
							<div class="m-wdfw-f-m-top">
								<image src="@/static/wdimg/wd-lq.png" mode="widthFix"></image>
							</div>
							<div class="m-wdfw-f-m-und">
								<span>领券中心</span>
							</div>
						</div>
						
						<div class="m-wdfw-f-mokuai"  @click="tzyqhy">
							<div class="m-wdfw-f-m-top">
								<image src="@/static/wdimg/wd-fx.png" style="width: 80rpx;" mode="widthFix"></image>
							</div>
							<div class="m-wdfw-f-m-und">
								<span>邀请好友</span>
							</div>
						</div>
						
						<div class="m-wdfw-f-mokuai" @click="tzwdcl">
							<div class="m-wdfw-f-m-top">
								<image src="@/static/wdimg/wd-qc.png" style="width: 80rpx;" mode="widthFix"></image>
							</div>
							<div class="m-wdfw-f-m-und">
								<span>我的车辆</span>
							</div>
						</div>
						<div class="m-wdfw-f-mokuai">
							<div class="m-wdfw-f-m-top">
								<image src="@/static/wdimg/wd-xfq.png" style="width: 80rpx;" mode="widthFix"></image>
							</div>
							<div class="m-wdfw-f-m-und" @click="tzwdxxjl">
								<span>消费记录</span>
							</div>
						</div>
						
						<div class="m-wdfw-f-mokuai">
							<div class="m-wdfw-f-m-top">
								<image src="@/static/wdimg/wd-wx.png" style="width: 80rpx;" mode="widthFix"></image>
							</div>
							<div class="m-wdfw-f-m-und" @click="tzwdwx">
								<span>我的维修</span>
							</div>
						</div>
						
						<div class="m-wdfw-f-mokuai">
							<div class="m-wdfw-f-m-top">
								<image src="@/static/wdimg/wd-yj.png" style="width: 80rpx;" mode="widthFix"></image>
							</div>
							<div class="m-wdfw-f-m-und">
								<span>意见反馈</span>
							</div>
						</div>
						
						<div class="m-wdfw-f-mokuai">
							<div class="m-wdfw-f-m-top">
								<image src="@/static/wdimg/wd-fz.png" style="width: 80rpx;" mode="widthFix"></image>
							</div>
							<div class="m-wdfw-f-m-und">
								<span>收货地址</span>
							</div>
						</div>
					
					</div>
				
				
				</div>
				
			</uni-card>
		</div>

		<div style="height: 300rpx;">
		<button class="tcdl" >退出登录</button>
		</div>
		<view class="footbut">
			<image class="footimg" src="../../static/kun/index/示警@2x.png"></image>
		</view>
		<CustomTabbar :current="currentTab" class="tabBar"></CustomTabbar>
	</view>
</template>

<script>
	import CustomTabbar from '../../components/custom-tabbar.vue';
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				currentTab: 'my',
				bgColor: 'rgb(10, 10, 10,0)',
				src: '/static/wdimg/aaa.jpg',
		
			
			
			}
		},
		methods: {
	
	tzgrxx() {
				uni.navigateTo({
					url: "/pages/my/grxx/grxx"
				})
			},
			towdyhq() {
						uni.navigateTo({
							url: "/pages/my/wdyhq/wdyhq"
						})
					},
					tzwddd() {
								uni.navigateTo({
									url: "/pages/my/wddd/wddd"
								})
							},
					tzdddzf() {
						uni.navigateTo({
							url: "/pages/my/wddd/dddzf/dddzf"
						})
					},
					tzdddsy() {
						uni.navigateTo({
							url: "/pages/my/wddd/dddsy/dddsy"
						})
					},
					tzdddpj() {
						uni.navigateTo({
							url: "/pages/my/wddd/dddpj/dddpj"
						})
					},
					tzlqzx() {
						uni.navigateTo({
							url: "/pages/my/lqzx/lqzx"
						})
					},
					tzwdcl() {
						uni.navigateTo({
							url: "/pages/my/wdcl/wdcl"
						})
					},
					tzwdxxjl() {
						uni.navigateTo({
							url: "/pages/my/xfjl/xfjl"
						})
					},
					tzwdwx() {
						uni.navigateTo({
							url: "/pages/my/wdwx/wdwx"
						})
					},
					tzyqhy() {
						uni.navigateTo({
							url: "/pages/my/yqhy/yqhy"
						})
					},
		}
	}
</script>

<style>
	.footbut {
		width: 120rpx;
		/* 圆的直径 */
		height: 120rpx;
		/* 圆的直径 */
		background: linear-gradient(to bottom right,#FEA14C, #FF480C);
		/* 设置背景色为红色 */
		border-radius: 50%;
		/* 将元素变为圆形 */
		position: fixed;
		/* 固定在屏幕底部 */
		bottom: 35rpx;
		/* 与页面底部对齐 */
		left: 315.5rpx;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		z-index: 1000;
	}
	
	.footimg {
		position: fixed;
		/* 固定在屏幕底部 */
		bottom: 70rpx;
		/* 与页面底部对齐 */
		left: 345rpx;
		width: 60rpx;
		/* 占满宽度 */
		height: 60rpx;
		/* 合适的高度 */
		align-items: center;
		z-index: 1000;
		/* 确保位于内容的上方 */
	}
	.tabBar {
		position: fixed;
		/* 固定在屏幕底部 */
		bottom: 0;
		/* 与页面底部对齐 */
		left: 0;
		width: 100%;
		/* 占满宽度 */
		height: 100rpx;
		/* 合适的高度 */
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 999;
		/* 确保位于内容的上方 */
	}
	.titlegrzx{
		position: absolute;
		/* top: 500rpx; */
		text-align: center;
		width: 750rpx;
		z-index: 1;
		font-size: 35rpx;
		top: 30rpx;
		color: white;
	}
	
	.uni-card{
		border-radius: 25rpx;
		
	}
	.top-top {
		height: 520rpx;
	}

	.top {
		width: 100%;
		height: 400rpx;
		background-image: url(@/static/wdimg/bjj@2x.png);
		/* 	overflow: hidden; */
		/* 	background-image: url(@/static/wdimg/aaa.jpg); */
		position: relative;
	}

	.txxxandyhq {
		width: 750rpx;
		position: absolute;
		/* background-color: blue; */
		height: 780rpx;
	}

	.txxx {
		/* background-color: red; */
		margin-top: 100rpx;
		text-align: center;
	}

	.txxx-tx {
		width: 150rpx;
		height: 150rpx;
		background-color: #65A4FF;
		margin: 0 auto;
		border-radius: 100%;
		/* 	display: flex; */
		align-content: center;
		/* 	justify-content: center; */
	}

	.txxx-xx {
		margin-top: 30rpx;
		display: flex;
		text-align: center;
		/* background-color: red; */
		justify-content: center;
		color: white;
		font-size: 30rpx;
	}

	.txxx-xx-xm {
		margin-right: 25rpx;
	}

	.wdyhq {
		height: 200rpx;
		/* background-color: red; */
	}

	.wdyhq-card {
		height: 160rpx;
		border-radius: 25rpx;
	}

	.wdyhq-card-content {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		line-height: 115rpx;
	}

	.wdyhq-card-content-left-img {
		width: 50rpx;
		margin-right: 20rpx;
	}

	.wdyhq-card-content-right-img {
		width: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.wdyhq-card-content-c {
		display: flex;
	}

	.w-c-c-c-a {
		margin-top: 6rpx;
	}

	.w-c-c-c-b {
		margin-right: 15rpx;
	}

	.w-c-c-c-t {
		font-weight: bold;
	}
	.card-title{
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		line-height: 100rpx;
		/* background-color: red; */
		border-bottom: 1rpx solid silver;
	}
	.card-title-text{
		font-size: 35rpx;
		font-weight: bold;
	}
	.card-title-ew{
		display: flex;
	}
	.card-title-ew-l{
		margin-right: 20rpx;
	}
	.card-title-ew-r{
		margin-right: 10rpx;
		margin-top: 8rpx;
	}
	.card-title-img{
		width: 20rpx;
		
	}
	
	
	.wddd-content{
		display: flex;
		width: 100%;
		height: 180rpx;
		justify-content: space-around;
	}
	
	
	.wddd-content-div{
		width: 185rpx;
		height: 99rpx;
		text-align: center;
		line-height: 90rpx;
		margin-top: 30rpx;
		color: white;
		font-size: 30rpx;
	}
	
	
	
	
	
	
	.tcdl{
		background-color: #D9D9D9;
		color: white;
		width: 600rpx;
		border-radius: 100rpx;
	}
	
	
	
	.m-wdfw-fw {
		width: 100%;
		/* margin-top: 10rpx; */
		background-color: white;
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		height: 550rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		/* background-color: red; */
	
	}
	
	.m-wdfw-f-mokuai {
		width: 180rpx;
		height: 180rpx;
		/* background-color: red; */
		text-align: center;
		/* border: 1px solid aliceblue; */
	
	}
	
	.m-wdfw-f-m-top {
		/* background-color: white; */
		height: 110rpx;
	}
	
	.m-wdfw-f-m-top image {
		width: 120rpx;
		margin-top: 30rpx;
	}
	
	.m-wdfw-f-m-und {
		line-height: 50rpx;
		font-size: 35rpx
	}
	

	
	
</style>